<template>
  <view class="content screen-width">
    <view class="title_head">
      <view class="title_item">
        <ul>
          <li
            @tap="changeIndex(index)"
            :class="currentItem === index ? 'active' : ''"
            v-for="(item, index) in titleItem"
            :key="index"
          >{{ item }}</li>
        </ul>
      </view>
      <view class="title_search">
        <view class="search_item">
          <input type="text" placeholder="请输入您想要查询的关键词" v-model="keyword" />
          <image src="../../static/proty/search_icon.png" @tap="searchConter" />
        </view>
      </view>
    </view>
    <view class="areaList">
      <view @tap="showArea">
        <input type="text" :value="address ? address : '地区'" disabled />
        <image src="../../static/proty/botton_icon.png" mode />
      </view>
      <view @tap="showdepartment" v-if="currentItem === 0 || currentItem === 1">
        <input type="text" :value="departmentData ? departmentData : '部门'" disabled />
        <image src="../../static/proty/botton_icon.png" mode />
      </view>
      <view @tap="showtimes" v-if="currentItem === 1">
        <input type="text" :value="getTimes ? getTimes : '发布时间'" disabled />
        <image src="../../static/proty/botton_icon.png" mode />
      </view>
      <view @tap="showDown">
        <input type="text" :value="downName ? downName : '下载'" disabled />
        <image src="../../static/proty/botton_icon.png" mode />
      </view>
    </view>

    <scroll-view scroll-y class="content_main" @scrolltolower="scrolltolower">
      <ul v-show="currentItem === 0">
        <!-- 政策通知 -->
        <navigator
          :url="`/pages/policy/policyDetails?id=${item.policyId}&inform=通知`"
          redirect
          v-for="(item, index) in getNotifyList"
          :key="index"
          class="listItem"
        >
          <view class="title" v-html="item.title"></view>
          <view class="center">
            <view class="area multipleRow">{{ item.label }}</view>
            <view class="time multipleRow">{{ item.date }}</view>
          </view>
          <img v-if="item.whetherCanExport===1" src="@/static/down.png" />
        </navigator>
      </ul>
      <ul v-show="currentItem === 1">
        <!-- 政策解读 -->
        <navigator
          :url="`/pages/policy/policyDetails?id=${item.id}&inform=解读`"
          redirect
          class="listItem"
          v-for="(item, index) in scrambleList"
          :key="index"
        >
          <view class="title">
            <p v-html="item.title"></p>
          </view>
          <view class="center">
            <view class="area multipleRow">{{ item.departmentName }}</view>
            <view class="time multipleRow" v-if="item.declareTime && item.deadline">
              {{ item.declareTime }} 至
              {{ item.deadline }}
            </view>
          </view>
          <img v-if="item.whetherCanExport===1" src="@/static/down.png" />
        </navigator>
      </ul>
      <ul v-show="currentItem === 2">
        <!-- 最新资讯 -->
        <navigator
          :url="`/pages/policy/newsDetail?id=${item.id}`"
          redirect
          class="listItem"
          v-for="(item, index) in newsList"
          :key="index"
        >
          <view class="title">
            <p v-html="item.title"></p>
          </view>
          <view class="center">
            <!-- <view class="area multipleRow">{{ item.departmentName }}</view> -->
            <view class="time multipleRow">{{ item.createTime }}</view>
          </view>
          <img v-if="item.whetherCanExport===1" src="@/static/down.png" />
        </navigator>
      </ul>
      <!-- 没有数据的提示 -->
      <van-divider>我也是有底线的</van-divider>
    </scroll-view>
    <!-- 地区 -->
    <PickerView
      ref="picker"
      :isshowArea="isshowArea"
      :type="proType"
      @affirm="affirm"
      @cancel="cancel"
    ></PickerView>
    <!-- 部门 -->
    <van-popup v-model="isShowDepartment" position="bottom" :style="{ height: '50%' }">
      <van-picker title="部门" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="cancel" />
    </van-popup>
    <!-- 截止时间 -->
    <van-popup v-model="issueTime" position="bottom" :style="{ height: '50%' }">
      <van-picker
        title="发布时间"
        show-toolbar
        :columns="columns1"
        @confirm="onConfirmTimes"
        @cancel="cancel"
      />
    </van-popup>
    <!-- 下载 -->
    <van-popup v-model="isDown" position="bottom" :style="{ height: '50%' }">
      <van-picker
        title="全部"
        show-toolbar
        :columns="columns2"
        @confirm="onConfirmDown"
        @cancel="cancel"
      />
    </van-popup>
    <Festival></Festival>
  </view>
</template>

<script>
import { newsList } from "../../util/api/newsList.js";
import { getCode } from "../../util/address.js";
import { isWeixin, wxShareConfig } from "util/wx.js";
export default {
  data() {
    return {
      whetherCanExport: 0, //是否可以下载
      downName: "",
      isDown: false,
      dataItem: {
        closeDay: "", // 选中的时间
        departmentId: "", // 选中的部门id
        province: "", // 省份
        city: "", // 城市
        area: "" // 地区
      },
      address: "", // 选中的地区(展示)
      keyword: "", // 关键字
      departmentData: "", // 选中部门的数据(展示)
      titleItem: ["政策通知", "政策解读", "最新资讯"],
      currentItem: 0,
      getNotifyList: [], // 通知数据渲染列表
      scrambleList: [], // 解读数据列表
      newsList: [], // 最新资讯列表
      getAreaData: [], // 接收地区的值
      areaList: {},
      isshowArea: false, // 显示地区框
      isShowDepartment: false, // 显示部门框
      columns: [], // 接收部门的数据
      departmentName: "",
      columns1: [
        { text: "请选择", value: "" },
        { text: "7天内截止", value: "7" },
        { text: "30天内截止", value: "30" }
      ], // 接收时间的数据
      columns2: [
        { text: "全部", value: "" },
        { text: "可下载", value: 1 }
      ],
      // 显示发布时间
      issueTime: false,
      getTimes: "", //展示数据(时间)
      pageNo0: 0, // 当前页0
      pageNo1: 1, // 当前页1
      pageNo2: 1, // 最新资讯
      oldAddress: "", // 保存地区
      pageSize: 10, // 页容量,
      total: 0,
      throttle: false, // 节流阀

      proType: 0, // 查地区类型 政策通知:0 政策解读:1 部门:2 项目:3 最新资讯:4
      province: "",
      nProvince: "",
      nCity: ""
    };
  },
  computed: {
    showCity() {
      let params = this.$store.state.cityInfo;
      // params.city = '东莞市'
      if (params.city === "" && params.province === "") {
        return true;
      } else {
        this.address = params.city;
        return false;
      }
    }
  },
  created() {
    this.address = uni.getStorageSync("city");
    // this.dataItem.city = uni.getStorageSync("city")
    this.getList();
    this.getDepartmentData(); /* 获取部门列表数据 */
  },
  mounted() {
    let that = this;
    if (isWeixin()) {
      uni.webView.getEnv(res => {
        if (res.miniprogram) {
          setTimeout(function() {
            that.postMessageToMini();
          }, 100);
        } else {
          that.initShareConfig();
        }
      });
    }
  },
  onShow() {
    // this.getNotice()
    // this.getList()
    // this.initLoadArea()
    // this.getDepartmentData() /* 获取部门列表数据 */
  },
  onHide() {
    this.nProvince = "";
    this.nCity = "";
  },

  methods: {
    changeIndex(index) {
      this.dataItem.departmentId = "";
      this.dataItem.closeDay = "";
      this.dataItem.province = "";
      this.dataItem.area = "";
      this.whetherCanExport = "";
      this.downName = "";

      this.address = uni.getStorageSync("city");
      this.dataItem.city = uni.getStorageSync("city");

      this.currentItem = index;

      // 地区接口类型根据不同的通知切换变换
      this.proType = index === 0 ? 0 : index === 1 ? 1 : 4;
      this.valueArr = [0, 0, 0];
      this.provinceList = [[], [], []];

      this.departmentData = ""; // 部门
      this.getTimes = ""; // 时间

      this.keyword = "";

      if (this.currentItem === 0) {
        this.getNotifyList = [];
        this.getList();
        this.getDepartmentData();
      } else if (this.currentItem === 1) {
        this.scrambleList = [];
        this.getList();
        this.getDepartmentData();
      } else {
        this.newsList = [];
        this.getNewsList();
      }
      this.$refs.picker.setArr();
      this.$refs.picker.initLoadArea(this.proType);
    },

    // 最新资讯
    getNewsList() {
      let params = {
        province: this.dataItem.province, // 省份
        city: this.dataItem.city, // 城市
        area: this.dataItem.area, // 地区
        title: this.keyword,
        pageNo: this.pageNo2,
        whetherCanExport: this.whetherCanExport
      };
      if (!params.city && !params.province) {
        params.city = uni.getStorageSync("city");
        params.province = uni.getStorageSync("province");
      }
      newsList(params).then(res => {
        this.newsList.push(...res.result.records);
        this.$changeText(res.result.records, "title", this.keyword);
        this.total = res.result.total;
      });
    },
    // 通知列表
    getList() {
      this.throttle = true;
      uni.showLoading({
        title: "加载中...",
        mask: false
      });
      if (this.currentItem === 0) {
        this.getNotice();
      } else {
        this.getinterpret();
      }
    },
    // 通知
    getNotice() {
      if (!this.nProvince && !this.nCity) {
        this.dataItem.city = uni.getStorageSync("city");
        this.dataItem.province = uni.getStorageSync("province");
      }
      let params = {
        beginDate: "",
        dq: getCode(
          this.dataItem.province,
          this.dataItem.city,
          this.dataItem.area
        ),
        endDate: "",
        pageIndex: this.pageNo0,
        pageSize: this.pageSize,
        policyId: "",
        source: this.departmentData,
        title: this.keyword,
        userID: "",
        whetherCanExport: this.whetherCanExport
      };
      this.$post("/bmj-api/api/es/Policy/queryPolicyList.json", params)
        .then(res => {
          if (res.retCode === 0) {
            this.$changeText(res.data.content, "title", this.keyword);

            if (this.pageNo0 === 0) {
              this.getNotifyList = res.data.content || [];
            } else {
              this.getNotifyList = this.getNotifyList.concat(res.data.content);
            }
            this.total = res.data.totalElements;
          }
        })
        .finally(() => {
          uni.hideLoading();
          this.throttle = false;
        });
    },
    // 解读
    getinterpret() {
      let obj = {
        pageNo: this.currentItem === 0 ? this.pageNo0 : this.pageNo1,
        pageSize: this.pageSize,
        closeDay: this.dataItem.closeDay,
        departmentId: this.dataItem.departmentId,
        province: this.dataItem.province,
        area: this.dataItem.area,
        city: this.dataItem.city,
        title: this.keyword,
        whetherCanExport: this.whetherCanExport
      };
      for (const key in obj) {
        if (!String(obj[key]).length) delete obj[key];
      }
      if (!obj.city && !obj.province) {
        obj.city = uni.getStorageSync("city");
        obj.province = uni.getStorageSync("province");
      }
      this.$get("/bmj-api/api/pms/pmsPolicyInterpret/list", obj)
        .then(res => {
          if (res.code == 200) {
            this.$changeText(res.result.records, "title", this.keyword);

            if (this.pageNo1 === 1) {
              this.scrambleList = res.result.records || [];
            } else {
              this.scrambleList = this.scrambleList.concat(res.result.records);
            }
            this.total = res.result.total;
          }
        })
        .finally(() => {
          uni.hideLoading();
          this.throttle = false;
        });
    },
    // 获取部门列表
    getDepartmentData() {
      let obj = {
        province: this.dataItem.province,
        city: this.dataItem.city,
        area: this.dataItem.area
      };
      let url = "";
      if (this.currentItem === 0) {
        url = "/bmj-api/api/pms/pmsPolicyNotice/queryRegionDepartmentInfo";
      } else if (this.currentItem === 1) {
        url =
          "/bmj-api/api/pms/pmsPolicyInterpret/queryPolicyInterpretAcceptDepartment";
      }
      if (obj.area !== "") {
        obj.province = "";
        obj.city = "";
      }
      if (obj.city !== "") {
        obj.province = "";
      }
      this.$get(url, obj).then(res => {
        // console.log(res);
        let arr = [];
        if (res.code == 200) {
          res.result.unshift({
            departmentName: "",
            id: ""
          });

          res.result.forEach(el => {
            // console.log(el);
            let obj = {
              text: el.departmentName,
              id: el.id
            };
            arr.push(obj);
          });
          // console.log(arr);
          this.columns = arr;
        }
      });
    },
    // 显示弹出层(地区)
    showArea() {
      this.isshowArea = true;
    },
    // 确认按钮(地区)
    affirm(province, city, area) {
      // console.log("组件值", province, city, area);
      this.dataItem.province = province;
      this.dataItem.city = city;
      this.dataItem.area = area;
      // this.dataItem.province = this.provinceList[0][this.valueArr[0]]
      // this.dataItem.city = this.provinceList[1][0][this.valueArr[1]]
      // this.dataItem.area = this.provinceList[2][0][this.valueArr[2]]
      let arr = [];
      if (
        this.dataItem.province != "请选择" &&
        this.dataItem.city === "请选择" &&
        this.dataItem.area === "请选择"
      ) {
        arr.push(this.dataItem.province);
      }
      if (
        this.dataItem.province != "请选择" &&
        this.dataItem.city != "请选择" &&
        this.dataItem.area === "请选择"
      ) {
        arr.push(this.dataItem.province);
        arr.push(this.dataItem.city);
      }
      if (
        this.dataItem.province != "请选择" &&
        this.dataItem.city != "请选择" &&
        this.dataItem.area != "请选择"
      ) {
        arr.push(this.dataItem.province);
        arr.push(this.dataItem.city);
        arr.push(this.dataItem.area);
      }
      // let arrLen = Array.from(new Set(arr));
      // console.log(9999999999, arr);
      let arrLen = arr;
      // for (let i = 0; i < arrLen.length; i++) {
      //   if (arrLen[i] === "请选择") {
      //     arrLen.splice(i, 1);
      //   }
      // }

      if (arrLen.length == 1) {
        this.dataItem.area = "",
        this.dataItem.city = "",
        this.dataItem.province = arrLen[0];
      } else if (arrLen.length == 2) {
        // this.dataItem.province = arr[arr.length - 2].name;
        // this.dataItem.city = arr[arr.length - 1].name;
        this.dataItem.province = arrLen[0],
        this.dataItem.area = "",
        this.dataItem.city = arrLen[1];
      } else if (arrLen.length == 3) {
        // this.dataItem.province = arr[0].name;
        // this.dataItem.city = arr[1].name;
        // this.dataItem.area = arr[arr.length - 1].name;
        this.dataItem.province = arrLen[0],
        this.dataItem.city = arrLen[1],
        this.dataItem.area = arrLen[2];
      } else {
        this.cancel(); // 空数组
        return;
      }
      this.address = arrLen.pop();
      this.nProvince = this.dataItem.province;
      this.nCity = this.dataItem.city;
      this.dataItem.departmentId = "";
      this.departmentData = "";
      this.cancel();
      if (this.currentItem === 0) {
        this.getNotifyList = [];
        this.pageNo0 = 0;
        this.getList();
        this.getDepartmentData();
      } else if (this.currentItem === 1) {
        this.scrambleList = [];
        this.pageNo1 = 0;
        this.getList();
        this.getDepartmentData();
      } else {
        this.newsList = [];
        this.pageNo2 = 1;
        this.getNewsList();
      }
    },
    // 取消按钮(地区,部门)
    cancel(mark) {
      this.isshowArea = false;
      this.isShowDepartment = false;
      this.issueTime = false;
      this.isDown = false;
    },
    /* 显示弹出层(部门) */
    showdepartment() {
      this.isShowDepartment = true;
    },
    // 点击确认按钮(部门)
    onConfirm(val) {
      if (val.id == "") {
        this.departmentData = "";
        this.dataItem.departmentId = "";
      } else {
        this.departmentData = val.text;
        this.dataItem.departmentId = val.id;
      }
      this.cancel();
      if (this.currentItem === 0) {
        this.getNotifyList = [];
        this.pageNo0 = 0;
      } else {
        this.scrambleList = [];
        this.pageNo1 = 0;
      }
      this.getList();
    },
    /* 显示发布时间 */
    showtimes() {
      this.issueTime = true;
    },
    showDown() {
      this.isDown = true;
    },
    // 点击按钮(发布时间)
    onConfirmTimes(val) {
      if (!val.value) {
        this.getTimes = val.value;
      } else {
        this.getTimes = val.text;
      }
      this.dataItem.closeDay = val.value;
      this.cancel();
      if (this.currentItem === 0) {
        this.getNotifyList = [];
        this.pageNo0 = 0;
      } else {
        this.scrambleList = [];
        this.pageNo1 = 0;
      }
      this.getList();
    },
    onConfirmDown(val) {
      this.whetherCanExport = val.value;
      this.downName = val.text;
      this.cancel();
      if (this.currentItem === 0) {
        this.getNotifyList = [];
        this.pageNo0 = 0;
      } else if (this.currentItem === 1) {
        this.scrambleList = [];
        this.pageNo1 = 0;
      } else {
        this.pageNo2 = 1;
        this.newsList = [];
      }
      if (this.currentItem === 0 || this.currentItem === 1) {
        this.getList();
      } else {
        this.getNewsList();
      }
    },
    // 点击搜索按钮
    searchConter() {
      if (this.currentItem === 0 || this.currentItem === 1) {
        if (this.keyword === "") {
          uni.showToast({
            title: "请输入你要查询的关键字",
            duration: 2000,
            icon: "none"
          });
          return;
        }
      }

      if (this.currentItem === 0 || this.currentItem === 1) {
        this.pageNo0 = 0;
        this.pageNo1 = 1;
        this.getNotifyList = [];
        this.scrambleList = [];
        // 获取关键词的,点击搜索框
        this.getList();
      } else {
        this.pageNo2 = 1;
        this.newsList = [];
        this.getNewsList();
      }
    },

    scrolltolower() {
      if (!this.throttle) {
        if (this.currentItem === 0 && this.getNotifyList.length >= this.total) {
          return;
        } else if (
          this.currentItem === 1 &&
          this.scrambleList.length >= this.total
        ) {
          return;
        } else if (
          this.currentItem === 2 &&
          this.newsList.length >= this.total
        ) {
          return;
        }
        if (this.currentItem === 0) {
          this.pageNo0 = this.pageNo0 + 1;
          this.getList();
        } else if (this.currentItem === 1) {
          this.pageNo1 = this.pageNo1 + 1;
          this.getList();
        } else {
          this.pageNo2 = this.pageNo2 + 1;
          this.getNewsList();
        }
      }
    },
    postMessageToMini() {
      let _this = this;
      let shareInfo = {
        shareTitle: "政策查询",
        link:
          "/pages/topage/index?redirect=" +
          encodeURIComponent(window.location.href)
      };
      if (window.UniAppJSBridge) {
        //向uniapp传值
        uni.webView.postMessage({
          data: shareInfo
        });
      } else {
        document.addEventListener("UniAppJSBridgeReady", function() {
          //向uniapp传值
          uni.webView.postMessage({
            data: shareInfo
          });
        });
      }
    },
    initShareConfig() {
      let _this = this;
      let windowurl = window.location.href.split("#")[0];
      uni.request({
        url: "https://oldm.51bmj.cn/WeiXin/GetClientSign", //仅为示例，并非真实接口地址。
        data: {
          rawUrl: windowurl
        },
        dataType: "json",
        header: {
          "X-Requested-With": "XMLHttpRequest"
        },
        method: "GET",
        success: res => {
          if (res.statusCode == 200) {
            let { data } = res;
            let shareInfo = {
              title: "政策查询",
              desc: "政策尽知 红利尽享",
              link: window.location.href
            };
            wxShareConfig(this.$wx, data, shareInfo);
          }
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.popup {
  height: fit-content;
  width: 100%;
  background: #fff;
}

.picker-btn {
  display: flex;
  height: 100upx;
  width: 100%;
  line-height: 100upx;
  background: #fff;
  font-size: 17px;
  z-index: 1;
  border-bottom: 1rpx solid #f8f8f8;

  .left {
    flex: 1;
    color: #0076ff;
    padding-left: 40upx;
    box-sizing: border-box;
  }

  .right {
    flex: 1;
    text-align: right;
    padding-right: 40upx;
    color: #fe4533;
    box-sizing: border-box;
  }
}

picker-view {
  width: 100%;
  height: 500rpx;
  display: relative;
}
.item {
  line-height: 100rpx;
  text-align: center;
}
.title_head {
  padding: 20rpx 30rpx;
  background-color: #2862ad;

  .title_item {
    display: flex;
    align-items: center;
    height: 100rpx;

    ul {
      display: flex;
      align-items: center;
      width: 100%;
      li {
        position: relative;
        font-size: 14px;
        color: #aaa;
        text-align: center;
        width: 30%;
        &.active {
          color: #fff;
          font-size: 16px;
          &::before {
            content: "";
            position: absolute;
            left: 40%;
            bottom: -25rpx;
            width: 30rpx;
            height: 3px;
            border-radius: 7rpx;
            background-color: #44a2ff;
          }
        }
      }
    }
  }

  .title_search {
    padding: 20rpx auto;
    height: 120rpx;
    align-items: center;
    display: flex;

    .search_item {
      height: 40px;
      width: 100%;
      display: flex;
      background-color: #fff;
      align-items: center;
      border-radius: 14rpx;
    }

    input {
      flex: 1;
      font-size: 14px;
      padding: 0 10rpx;
      padding-left: 30rpx;
      height: 30rpx;
      &::placeholder {
        font-size: 12px;
      }
    }

    image {
      max-width: 16px;
      max-height: 16px;
      margin: 0 30rpx;
    }
  }
}

.content_main {
  height: calc(100vh - 380rpx - 50px);

  // padding-bottom: 20rpx;
  ul {
    .listItem {
      border-radius: 10rpx;
      background-color: #fff;
      margin: 20rpx 30rpx;
      padding: 30rpx 40rpx;
      position: relative;
      .title {
        color: #000;
        font-weight: 700;
        font-size: 16px;
      }

      .center {
        display: flex;
        margin-top: 20rpx;
        justify-content: space-between;

        .area {
          flex: 1;
          padding-right: 20rpx;
          color: #aaa;
          font-size: 10px;
        }

        .time {
          text-align: right;
          flex: 1;
          color: #aaa;
          font-size: 10px;
        }
      }
      img {
        position: absolute;
        top: 6rpx;
        right: 8rpx;
      }
    }

    li {
      border-radius: 10rpx;
      background-color: #fff;
      margin: 20rpx 30rpx;
      padding: 30rpx 40rpx;

      .title {
        color: #000;
        font-weight: 700;
      }

      .center {
        display: flex;
        margin-top: 20rpx;
        justify-content: space-between;

        .area {
          flex: 1;
          padding-right: 20rpx;
          color: #aaa;
          font-size: 10px;
        }

        .time {
          flex: 1;
          color: #aaa;
          font-size: 10px;
        }
      }
    }
  }
}

.areaList {
  padding: 0 20rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 60px;
  overflow: scroll;
  view {
    max-height: 80rpx;
    background-color: #fff;
    margin-right: 30rpx;
    display: flex;
    padding: 10rpx 10rpx;
    align-items: center;
    width: 22%;

    image {
      width: 20rpx;
      height: 14rpx;
      margin-left: 20rpx;
    }

    input {
      width: 140rpx;
      font-size: 10px;
      color: #44a2ff;
    }
  }
}

/deep/ .van-dropdown-menu__bar {
  display: flex;
  align-items: center;
  background-color: #f8f9fd;
  padding-left: 30rpx;
}

/deep/ .van-dropdown-menu__item {
  flex: none;
  padding: 10rpx 30rpx;
  text-align: center;
  height: 56rpx;
  background-color: #fff;
  margin-right: 20rpx;

  span {
    color: #77b0ff;
    font-size: 14px;
  }
}
</style>

